<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex  v-if="backUrl.length > 0" md12>
        <v-btn icon class="mx-1" @click="$router.push(backUrl)">
          <v-icon>keyboard_backspace</v-icon>
        </v-btn>
        <span class="title ml-4">{{backTitle}}</span>
      </v-flex>

      <v-flex v-show="backUrl == ''" md12 xs12 class="overflow-tab">
        <v-tabs
          v-model="tabs"
          class="pos-abs"
          fixed-tabs
          color="transparent"
          slot="extension"
          @input="getTabClicked"
        >
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab
            v-for="(item, index) in tabItems"
            :key="index"
            :href="`#${item.value}`"
            class="primary--text"
          >
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>

      <v-layout row wrap align-content-start justify-start v-show="tabs == '1'">
        <v-flex md2 xs5 class="mx-2">
          <v-text-field
            mask="######"
            name="lftid"
            label="玩家ID"
            v-model="queryForm1.lftid"
            counter="6"
            type="number"
            maxlength="6"
          ></v-text-field>
        </v-flex>
        <v-flex md2 xs5 class="mx-2">
          <v-text-field name="nickname" label="玩家昵称" v-model="queryForm1.nickname"></v-text-field>
        </v-flex>

        <v-flex md2 xs5 class="mx-2">
          <v-btn @click="search1" dark color="blue" class="mt-2">
            <v-icon>search</v-icon>
            <span class="pl-2 subheading">搜索</span>
          </v-btn>
        </v-flex>

        <v-flex md12 class="chip-selector">
          <v-chip
            @click="chipClicked(item, 1)"
            v-for="item of chipItems1"
            :key="item.name"
            outline
            :color="chipSelected1 === item.value ? 'teal':'grey'"
            text-color="black"
          >
            <v-avatar
              class="white--text subheading"
              :class="chipSelected1 === item.value ? 'teal':'grey'"
            >
              <!-- <v-icon v-if="chipSelected === item.value">check</v-icon> -->
              {{item.name}}
            </v-avatar>
            <span class="subheading">{{chipCount1[item.value]}}</span>
          </v-chip>
        </v-flex>
        <v-flex row md12 justify-center xs12 class="overflow-table">
          <div class="table-container pos-abs">
            <v-card class="custom-table-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
                <thead>
                  <tr>
                    <th v-for="(item, i) of headers1" :key="i">
                      <div>{{item.text}}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers1.length" class="column">
                      <div data-v-6fb8a096 class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>

                  <tr v-for="item of tableData1" :key="item.lftid">
                    <td>{{item.lftid}}</td>
                    <td class="text-xs-center">
                      <v-avatar size="36">
                        <img :src="item.headUrl" alt>
                      </v-avatar>
                    </td>
                    <td>{{item.nickname}}</td>
                    <td>{{item.number.number1}} 张</td>
                    <td>{{item.number.number2}} 张</td>
                    <td>{{item.number.number3}} 张</td>
                    <td>{{item.number.number4}} 张</td>
                    <td>{{item.number.number5}} 张</td>
                    <td>{{item.number.number6}} 张</td>
                    <td>{{item.number.number7}} 张</td>
                    <td>{{item.number.number8}} 张</td>
                    <td>{{item.number.number9}} 张</td>
                    <td>{{item.number.number10}} 张</td>
                    <td>{{item.totalCards}} 张</td>
                    <td>
                      <v-btn
                        flat
                        round
                        dark
                        color="green darken-1"
                        class="mx-1"
                        @click="editCard(item, 1)"
                      >
                        <span class="mx-1">修改</span>
                        <v-icon color="green darken-1">edit</v-icon>
                      </v-btn>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">未发送卡片数量总计：</td>
                    <td>{{extraTr1.number1}} 张</td>
                    <td>{{extraTr1.number2}} 张</td>
                    <td>{{extraTr1.number3}} 张</td>
                    <td>{{extraTr1.number4}} 张</td>
                    <td>{{extraTr1.number5}} 张</td>
                    <td>{{extraTr1.number6}} 张</td>
                    <td>{{extraTr1.number7}} 张</td>
                    <td>{{extraTr1.number8}} 张</td>
                    <td>{{extraTr1.number9}} 张</td>
                    <td>{{extraTr1.number10}} 张</td>
                    <td></td>
                  </tr>
                  <tr v-if="tableData1.length === 0">
                    <td :colspan="headers1.length" class>
                      <div  class="text-md-center">
                        <i
                          
                          aria-hidden="true"
                          class="icon yellow--text text--darken-3 material-icons"
                        >warning</i>
                        <span  class="subheading">暂无数据</span>
                      </div>
                    </td>
                  </tr>
                  <!-- <tr class="sum-row"></tr> -->
                </tbody>
              </table>
            </v-card>
            <div class="text-xs-center my-2">
              <v-pagination
                @input="pageChange1"
                circle
                :length="pagination1.pageCount"
                :total-visible="pagination1.totalVisible"
                v-model="pagination1.page"
              ></v-pagination>
            </div>
          </div>
        </v-flex>
      </v-layout>
      <v-layout row wrap align-content-start justify-start v-show="tabs == '2'">
        <v-flex md11>
          <v-layout row nowrap justify-start>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field
                mask="######"
                name="lftid"
                label="玩家ID"
                v-model="queryForm2.lftid"
                counter="6"
                type="number"
                maxlength="6"
              ></v-text-field>
            </v-flex>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field name="nickname" label="玩家昵称" v-model="queryForm2.nickname"></v-text-field>
            </v-flex>
            <v-flex md3 xs8 class="mt-2 date-wrapper">
              <!-- 按时间查询 -->
              <v-menu offset-y>
                <v-btn depressed slot="activator">
                  <v-icon>date_range</v-icon>
                  <span>选择起始日期</span>
                </v-btn>
                <v-date-picker
                  min="2017-05-14"
                  :max="currentDate"
                  :first-day-of-week="0"
                  locale="zh-cn"
                  v-model="queryForm2.fromTime"
                ></v-date-picker>
              </v-menu>
              <span class="date-text">{{queryForm2.fromTime}}</span>
            </v-flex>
            <v-flex md3 xs8 class="mt-2 date-wrapper">
              <!-- 按时间查询 -->
              <v-menu offset-y>
                <v-btn depressed slot="activator">
                  <v-icon>date_range</v-icon>
                  <span>选择结束日期</span>
                </v-btn>
                <v-date-picker
                  min="2017-05-14"
                  :max="currentDate"
                  :first-day-of-week="0"
                  locale="zh-cn"
                  v-model="queryForm2.toTime"
                ></v-date-picker>
              </v-menu>
              <span class="date-text">{{queryForm2.toTime}}</span>
            </v-flex>
            <v-flex md4 xs5 class="mx-2">
              <v-btn icon @click="refresh" class="mt-2">
                <v-icon color="red">backspace</v-icon>
              </v-btn>
              <v-btn @click="search2" dark color="blue" class="mt-2">
                <v-icon>search</v-icon>
                <span class="pl-2 subheading">搜索</span>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-flex>

        <v-flex md12 class="chip-selector">
          <v-chip
            @click="chipClicked(item, 2)"
            v-for="item of chipItems2"
            :key="item.name"
            outline
            :color="chipSelected2 === item.value ? 'teal':'grey'"
            text-color="black"
          >
            <v-avatar
              class="white--text subheading"
              :class="chipSelected2 === item.value ? 'teal':'grey'"
            >
              <v-icon v-if="chipSelected2 === item.value">check</v-icon>
              <!-- {{item.name}} -->
            </v-avatar>
            <span class="subheading">{{item.name}}</span>
          </v-chip>
        </v-flex>
        <v-flex md12 class="chip-selector">
          <v-chip
            @click="chipClicked(item, 3)"
            v-for="item of chipItems1"
            :key="item.name"
            outline
            :color="chipSelected3 === item.value ? 'blue':'grey'"
            text-color="black"
          >
            <v-avatar
              class="white--text subheading"
              :class="chipSelected3 === item.value ? 'blue':'grey'"
            >
              <v-icon v-if="chipSelected3 === item.value">check</v-icon>
              <!-- {{item.name}} -->
            </v-avatar>
            <span class="subheading">{{item.name}}</span>
          </v-chip>
        </v-flex>
        <v-flex row md12 justify-center xs12 class="overflow-table">
          <div class="table-container pos-abs">
            <v-card class="custom-table-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
                <thead>
                  <tr>
                    <th v-for="(item, i) of headers2" :key="i">
                      <div>{{item.text}}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers2.length" class="column">
                      <div class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>
                  <tr v-for="(item,i) of tableData2" :key="i">
                    <td>{{item.lftid}}</td>
                    <td class="text-xs-center">
                      <v-avatar size="36">
                        <img :src="item.headUrl" alt>
                      </v-avatar>
                    </td>
                    <td>{{item.nickname}}</td>
                    <td>{{item.outGift}}</td>
                    <td>{{item.inGift}}</td>
                    <td>{{item.lucky}}</td>
                    <td>{{item.used}}</td>
                    <td>{{item.remainCard}}</td>
                    <td>
                      <v-btn
                        flat
                        round
                        dark
                        color="green darken-1"
                        class="mx-1"
                        @click="gotoCardRecord(item, 2)"
                      >
                        <span class="mx-1">卡片增减记录</span>
                        <v-icon color="green darken-1">more</v-icon>
                      </v-btn>
    
                      
                    </td>
                  </tr>
                  <tr v-if="tableData2.length === 0">
                    <td :colspan="headers2.length" class>
                      <div  class="text-md-center">
                        <i
                          
                          aria-hidden="true"
                          class="icon yellow--text text--darken-3 material-icons"
                        >warning</i>
                        <span  class="subheading">暂无数据</span>
                      </div>
                    </td>
                  </tr>
                  <!-- <tr class="sum-row"></tr> -->
                </tbody>
              </table>
            </v-card>
            <div class="text-xs-center my-2">
              <v-pagination
                @input="pageChange2"
                circle
                :length="pagination2.pageCount"
                :total-visible="pagination2.totalVisible"
                v-model="pagination2.page"
              ></v-pagination>
            </div>
          </div>
        </v-flex>
      </v-layout>
    </v-layout>
    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <div grid-list-md>
            <v-layout wrap justify-space-around>
              <v-flex
                d-flex
                nowrap
                align-start
                xs12
                sm8
                md5
                v-for="(item, key) of editedItem.number"
                :key="key"
              >
                <v-layout v-if="key !== 'totalNumber'" row align-center>
                  <v-flex xs3>
                    <span class="title">{{cardType[key]}}</span>
                  </v-flex>
                  <v-flex xs9>
                    <v-text-field type="text" mask="###" v-model="editedItem.number[key]"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { card } from "../../api/activity";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    showProgress: false,
    limit: 7,
    offset1: 0,
    offset2: 0,
    dialog: false,
    allowEdit: true,
    isSearch1: false,
    isSearch2: false,
    tabs: "",
    tabItems: [
      {
        text: "卡片数量详情",
        value: 1
      },
      {
        text: "卡片赠送记录",
        value: 2
      }
    ],
    pagination1: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    pagination2: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 绑定到页面的
    queryForm1: {
      lftid: "",
      nickname: ""
    },
    queryForm2: {
      lftid: "",
      nickname: "",
      superId: ""
    },
    // 实际发送查询条件
    form: {
      fromTime: "",
      toTime: "",
      lftid: "",
      nickname: "",
      superId: "",
      limit: 10,
      offset: 0,
      realName: ""
    },
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData1: [],
    tableData2: [],
    formTitle: "代理资料",
    headers1: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "[帅1]", value: "shuai1", align: "center", sortable: false },
      { text: "[帅2]", value: "number1", align: "center", sortable: false },
      { text: "[互]", value: "hu", align: "center", sortable: false },
      { text: "[游]", value: "you1", align: "center", sortable: false },
      { text: "[感]", value: "gan", align: "center", sortable: false },
      { text: "[恩]", value: "en", align: "center", sortable: false },
      { text: "[一]", value: "yi", align: "center", sortable: false },
      { text: "[路]", value: "lu", align: "center", sortable: false },
      { text: "[有]", value: "you2", align: "center", sortable: false },
      { text: "[你]", value: "ni", align: "center", sortable: false },
      { text: "总数", value: "totalNumber", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    headers2: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "赠出", value: "nickname", align: "center", sortable: false },
      { text: "受赠", value: "nickname", align: "center", sortable: false },
      { text: "砸蛋", value: "nickname", align: "center", sortable: false },
      { text: "兑换", value: "nickname", align: "center", sortable: false },
      { text: "剩余数量", value: "nickname", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      name: ""
    },
    beforeEditedItem: {},
    chipItems2: [
      {
        name: "赠出",
        value: 1
      },
      {
        name: "受赠",
        value: 2
      },
      {
        name: "砸蛋",
        value: 3
      },
      {
        name: "兑换",
        value: 4
      }
    ],
    chipItems1: [
      {
        name: "帅1",
        value: "number1"
      },
      {
        name: "帅2",
        value: "number2"
      },
      {
        name: "互",
        value: "number3"
      },
      {
        name: "游",
        value: "number4"
      },
      {
        name: "感",
        value: "number5"
      },
      {
        name: "恩",
        value: "number6"
      },
      {
        name: "一",
        value: "number7"
      },
      {
        name: "路",
        value: "number8"
      },
      {
        name: "有",
        value: "number9"
      },
      {
        name: "你",
        value: "number10"
      },
      {
        name: "总",
        value: "totalNumber"
      }
    ],
    chipCount1: {},
    chipSelected1: "number1",
    chipSelected2: 1,
    chipSelected3: "number1",
    modal: false,
    modalText: "",
    showCancel: false,
    currentDate: "",
    cardType: {
      number1: "帅1",
      number2: "帅2",
      number3: "互",
      number4: "游",
      number5: "感",
      number6: "恩",
      number7: "一",
      number8: "路",
      number9: "有",
      number10: "你"
    },
    extraTr1: {},
    backUrl: "",
    bonusUid: "",
    backTitle: ""
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });

    let query = this.$route.query;
    if (query.tabs) {
      this.tabs = query.tabs;
    }
    if (query.from == "bonusrecord") {
      this.backUrl = `/activity/bonusdetail?uid=${query.uid}&name=${encodeURI(
        query.name
      )}`;
      this.bonusUid = query.uid;
      if (query.tabs == "1") {
        this.backTitle = "卡片数量详情";
        this.search1(false, true);
      } else if (query.tabs == "2") {
        this.backTitle = "卡片赠送记录";
        this.search2(false, true);
      }
    } else {
      this.getCardDetailList();
      this.getCardPresentList();
    }
  },
  methods: {
    refresh() {
      this.isSearch1 = false;
      this.isSearch2 = false;
      this.offset1 = 0;
      this.offset2 = 0;
      this.chipSelected1 = "number1";
      this.chipSelected2 = 1;
      this.queryForm1 = {
        lftid: "",
        nickname: ""
      };
      this.queryForm1 = {
        lftid: "",
        nickname: "",
        fromTime: "",
        toTime: ""
      };
      this.pagination1.page = 1;
      this.pagination2.page = 1;
      this.getCardDetailList();
      this.getCardPresentList();
    },
    // 获取代理列表
    getCardDetailList() {
      const qs = {
        limit: this.limit,
        offset: this.offset1,
      };
      if (this.chipSelected1.match('totalNumber')) {
        qs.rewardType = 100;
      } else {
         qs.rewardType = Number(this.chipSelected1.match(/\d+/g)[0])
      }
      this.showProgress = true;
      card.getCardDetailList.r(qs).then(({ data }) => {
        console.log("getCardDetailList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.extraTr1 = $data.dusedVo;
            this.chipCount1 = $data.usedVo;
            this.tableData1 = rankData;

            this.pagination1.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    // 按条件查询代理
    searchCardDetailList(form) {
      this.showProgress = true;
      card.getCardDetailList.r(form).then(({ data }) => {
        console.log("getCardDetailList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.extraTr1 = $data.dusedVo;
            this.chipCount1 = $data.usedVo;
            this.tableData1 = rankData;

            this.pagination1.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    editCardAmount() {
      let edited = _.cloneDeep(this.editedItem);
      let beforeEdited = _.cloneDeep(this.beforeEditedItem);
      console.log(edited, beforeEdited);

      let changeList = [];
      let beforeNumber = beforeEdited.number;
      _.map(edited.number, (item, key) => {
        if (key !== "totalNumber") {
          changeList.push({
            rewardType: Number(key.match(/\d+/g)[0]),
            after: Number(item),
            before: Number(beforeNumber[key])
          });
        }
      });

      let opt = {
        uid: this.editedItem.uid,
        changeList
      };

      card.editCardAmount.r(opt).then(({ data }) => {
        console.log("editCardAmount", data);
        if (data.result == 0) {
          this.getCardDetailList();
        }
        this.dialog = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    // 获取卡片赠送记录
    getCardPresentList() {
      const qs = {
        limit: this.limit,
        offset: this.offset2,
        gift: this.chipSelected2
      };
      if (this.chipSelected3.match(/\d+/g)) {
        qs.rewardType = Number(this.chipSelected3.match(/\d+/g)[0]);
      } else {
        qs.rewardType = 100
      }
      this.showProgress = true;  
      card.getCardPresentList.r(qs).then(({ data }) => {
        console.log("getCardPresentList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.extraTr2 = $data.dusedVo;
            this.chipCount2 = $data.usedVo;
            this.tableData2 = rankData;

            this.pagination2.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    searchCardPresentList(form) {
      this.showProgress = true;
      card.getCardPresentList.r(form).then(({ data }) => {
        console.log("getCardPresentList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.extraTr2 = $data.dusedVo;
            this.chipCount2 = $data.usedVo;
            this.tableData2 = rankData;

            this.pagination2.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊"
        }
      ];
    },
    getTabClicked() {},
    editCard(item) {
      this.dialog = true;
      this.formTitle = "修改卡片数量";
      this.editedItem = _.cloneDeep(item);
      this.beforeEditedItem = _.cloneDeep(item);
    },
    gotoCardRecord(item) {
      this.$router.push(
        `/activity/carddetail?uid=${item.uid}&type=${this.chipSelected3}`
      );
    },
    search1(fromPage, other) {
      let valid = 0;
      let form = {};
      console.log(this.queryForm1);
      _.forEach(this.queryForm1, (item, key) => {
        item ? (form[key] = item) : valid++;
      });
      if (!other) {
        if (valid == 2) {
          return $Vue.$emit("toggleSnackbar", {
            text: "请至少选择一个查询条件"
          });
        }
      } else {
        form.uid = this.bonusUid;
      }

      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset1 = 0;
        this.pagination1.page = 1;
      }
      form.rewardType = Number(this.chipSelected1.match(/\d+/g)[0]);
      form.limit = this.limit;
      form.offset = this.offset1;
      this.searchCardDetailList(form);
      this.isSearch1 = true;
    },
    search2(fromPage, other) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm2, (item, key) => {
        if (key != "uid") {
          item ? (form[key] = item) : valid++;
        }
      });
      if (!other) {
        if (valid == 4) {
          return $Vue.$emit("toggleSnackbar", {
            text: "请至少选择一个查询条件"
          });
        }

        if (this.queryForm2.fromTime && this.queryForm2.toTime) {
          if (
            new Date(this.queryForm2.fromTime).getTime() >
            new Date(this.queryForm2.toTime).getTime()
          ) {
            return $Vue.$emit("toggleSnackbar", {
              text: "起始日期不能早于结束日期"
            });
          }
          form.toTime = new Date(
            this.queryForm2.toTime + " 23:59:59"
          ).getTime();
          form.fromTime = new Date(
            this.queryForm2.fromTime + " 00:00:00"
          ).getTime();
        } else if (this.queryForm2.fromTime || this.queryForm2.toTime) {
          return $Vue.$emit("toggleSnackbar", {
            text: "请选择完整起止日期"
          });
        }
      } else {
        form.uid = this.bonusUid;
      }

      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset2 = 0;
        this.pagination2.page = 1;
      }
      form.gift = this.chipSelected2;
      form.limit = this.limit;
      form.offset = this.offset2;

      if (this.chipSelected3.match(/\d+/g)) {
        form.rewardType = Number(this.chipSelected3.match(/\d+/g)[0]);
      } else {
        form.rewardType = 100
      }

      this.searchCardPresentList(form);
      this.isSearch2 = true;
    },
    pageChange1(page) {
      this.offset1 = (page - 1) * this.limit;
      if (!this.isSearch1) {
        this.getCardDetailList();
      } else {
        // ***
        this.search1("wyvj");
      }
    },
    pageChange2(page) {
      this.offset2 = (page - 1) * this.limit;
      if (!this.isSearch2) {
        this.getCardPresentList();
      } else {
        // ***
        this.search1("wyvj");
      }
    },
    chipClicked(item, type) {
      this[`chipSelected${type}`] = item.value;
      console.log(item)
      if (type == 1) {
        this.pagination1.page = 1;
        this.offset1 = 0;
        this.queryForm1 = {
          lftid: "",
          nickname: "",
        };
        this.getCardDetailList();
      } else if (type == 2 || type == 3) {
        this.pagination2.page = 1;
        this.offset2 = 0;
        this.queryForm2 = {
          lftid: "",
          nickname: "",
          fromTime: "",
          toTime: ""
        };
        
        this.getCardPresentList();
      }
    },
    confirmDialog() {
      console.log(this.editedItem);
      this.editCardAmount();
    },
    confirmModal() {
      // this.cancelAgentQualify();
    }
  }
};
</script>
<style lang="less" scoped>
.date-wrapper {
  position: relative;
    display: flex;
  align-items: center;
  justify-content: space-around;
    top: -8px;
  .date-text {
    display: inline-block;
    width: 120px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: relative;
    top: 0;

    .date-clear {
      position: absolute;
      right: -20px;
      top: 4px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>